<script setup>

import router from "@/router";
import {reactive, ref} from "vue";
import {get, post} from "@/net";
import {ElMessage} from "element-plus";

const tableData = reactive([])

const getSingerList = () => {
    get('/api/singer/all',
            (data) => {
                tableData.value = data
                console.log(tableData.value.length)
                initData()
            }
    )
}

const getImgSrc = (picName) => {
    return `http://localhost:8080/uploaded/${picName}`
}

const pageSize = 7 // 每页显示的数据数量
const currentPage = ref(1) // 当前页码
const total = ref(0) // 总数据条数
const pagedData = ref([]) // 当前页的数据

// 初始化数据
const initData = () => {
    total.value = tableData.value.length
    updatePageData()
}

// 更新当前页的数据
const updatePageData = () => {
    const start = (currentPage.value - 1) * pageSize
    const end = start + pageSize
    pagedData.value = tableData.value.slice(start, end)
}

// 处理页码变化的函数
const handlePageChange = (newPage) => {
    currentPage.value = newPage
    updatePageData()
}

// 调用函数来获取数据
const fetchData = () => {
    getSingerList()
}

// 调用 fetchData 来获取数据
fetchData()

const deleteSinger = (scope) => {
    post('/api/singer/delete', {
        sid: scope.row.sid
    }, (message) => {
        ElMessage.success(message)
        getSingerList()
    }, (message) => {
        ElMessage.warning(message)
    })
}
</script>

<template>
    <div>
        <div>
            <el-button @click="router.push('/index')" type="warning">{{ '返回' }}</el-button>
        </div>
        <div class="singer-list">
            <el-table :data="pagedData" style="width: 1000px">
                <el-table-column label="Id" prop="sid" />
                <el-table-column label="歌手图片">
                    <template #default="scope">
                        <el-image fit="cover" :src="getImgSrc(scope.row.pic)" alt=""  style="width: 50px;height: 50px;"/>
                    </template>
                </el-table-column>
                <el-table-column label="名字" prop="name" />
                <el-table-column label="性别">
                    <template #default="scope">
                        <div v-if="scope.row.gender === 'M'">男</div>
                        <div v-if="scope.row.gender === 'F'">女</div>
                    </template>
                </el-table-column>
                <el-table-column align="right">
                    <template #header>
                        <el-row :gutter="10" style="width: 100%;">
                            <el-col :span="18">
                                <el-input size="small" placeholder="Type to search" />
                            </el-col>
                            <el-col :span="3">
                                <el-button
                                        size="small"
                                        type="primary"
                                        @click="router.push('/index/add-singer')"
                                >新增</el-button>
                            </el-col>
                        </el-row>
                    </template>
                    <template #default="scope">
                        <el-button size="small" @click="router.push({path: '/index/update-singer', query: {sid: scope.row.sid}})">查看详情</el-button>
                        <el-popconfirm
                                title="确定要删除该歌手吗?"
                                confirm-button-text="确认"
                                cancel-button-text="取消"
                                @confirm="deleteSinger(scope)"
                        >
                            <template #reference>
                                <el-button
                                        size="small"
                                        type="danger"
                                >删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    style="margin: 20px 400px"
                    layout="total, prev, pager, next, jumper"
                    background
                    :page-size="pageSize"
                    :current-page="currentPage"
                    :total="total"
                    @current-change="handlePageChange"
            />
        </div>

    </div>
</template>

<style scoped>
.singer-list {
    margin-left: 60px;
}
</style>